<template>
	<view class="g-list pad">
		<view @click="handleItemClick(item)" class="g-list-item" v-for="item in list" :key="item.id" :style="{height: itemHeight + 'px'}">
			<image :src="item.bgImg || item.typeBgImg" class="g-list-item-bg h-fill" mode="widthFix"></image>
			<view class="g-list-item-content v-fill uni-flex align-center pad-2">
				<view class="uni-flex-extend uni-flex uni-column">
					<text class="uni-bold">{{item.name}}</text>
					<text class="uni-text-small">{{item.intro || ""}}</text>
				</view>
				<image class="g-list-item-icon" :style="{width: itemHeight + 'px'}" :src="item.icon || item.typeIcon" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from "vuex"
	import {getGameList} from "../../api/game.js";
	//背景图宽高比
	const bgImgRatio = 3.7;
	export default {
		data() {
			return {
				list: [],
				loadingStatus: "noMore",
				pageNum: 0,
				pageSize: 20,
				itemHeight: 80
			};
		},
		computed: {
			...mapState(["currShop"])
		},
		created() {
			let sysInfo = uni.getSystemInfoSync();
			let bgImgWidth = sysInfo.windowWidth - uni.upx2px(20) * 2;
			let bgImgHeight = bgImgWidth / bgImgRatio;
			this.itemHeight = bgImgHeight;
			this.reload();
		},
		methods: {
			handleItemClick(item) {
				this.$emit("itemClick", item);
			},
			async reload() {
				if (this.loadingStatus === "loading") {
					return;
				}
				this.loadingStatus = "more",
				this.list = [];
				this.pageNum = 0;
				await this.loadMore();
			},
			async loadMore() {
				if (this.loadingStatus === "loading" || this.loadingStatus === "noMore") {
					return;
				}
				let pageNum = this.pageNum + 1;
				let prevStatus = this.loadingStatus;
				this.loadingStatus = "loading";
				try{
					let res = await getGameList({
						pageNum: pageNum,
						pageSize: this.pageSize,
						storeId: this.currShop.id
					})
					if (res.records.length) {
						this.pageNum += 1;
						this.list = this.list.concat(res.records);
					}
					if (this.list.length < res.total) {
						this.loadingStatus = "more";
					} else {
						this.loadingStatus = "noMore";
					}
				}catch(e){
					this.$log("加载游戏列表遇到错误", e);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.g-list {
		&-item {
			color: #FFFFFF;
			position: relative;
			&-bg {
				position: absolute;
			}
			&-content {
				position: relative;
			}
		}
		&-item:not(:last-child) {
			margin-bottom: 20rpx;
		}
	}
</style>
